<template>
  <el-form ref="formRef" :model="formData" label-width="100px" size="large">
    <el-row v-for="(rowOption, index) in formConifg" :key="index">
      <el-col
        v-for="item in rowOption.row"
        :key="item.label"
        :span="item.span || 24 / rowOption.row.length"
      >
        <el-form-item
          :label="item.label"
          :prop="item.prop"
          v-show="item.isShow ? item.isShow(formData) : true"
        >
          <component
            class="view-item"
            :is="item.component"
            v-model="formData[item.prop]"
            v-bind="item.attrs"
            :isView="true"
            style="width: 100%"
            @change="(val) => (item.change ? item.change(val, formData) : '')"
          ></component>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div class="dialog-footer">
    <el-button type="primary" @click="close">关闭</el-button>
  </div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const props = defineProps({
  formData: {
    // 表单数据
    type: Object,
    default: () => {},
  },
  formConifg: {
    //表单配置项
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["close"]);

const formRef = ref(null);
const formData = ref({});

watch(
  () => props.formData,
  (newVal) => {
    formData.value = newVal;
  },
  { immediate: true }
);

const close = () => {
  emit("close");
};
</script>
<style lang="scss" scoped>
.el-row {
  &:last-child {
    border-bottom: 1px solid #d9d9d9;
  }
  .el-col:last-child {
    border-right: 1px solid #d9d9d9;
  }
}

.el-form-item {
  border-top: 1px solid #d9d9d9;
  margin-bottom: 0px;
  :deep(.el-form-item__label) {
    height: auto;
    background: #f5f5f5;
    background-color: #f5f5f5;
    border-right: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    &:before {
      content: "" !important;
    }
  }
  :deep(.el-form-item__content) {
    pointer-events: none; //禁止点击
    .el-date-editor {
      --el-input-border-color: transparent;
      .el-input__prefix {
        display: none;
      }
      .el-range__icon {
        display: none;
      }
    }
    .el-select {
      --el-border-color: transparent;
      .el-select__suffix {
        display: none;
      }
      .el-select__selection {
        .el-select__placeholder.is-transparent {
          display: none;
        }
      }
    }
    .el-textarea,
    .el-input {
      --el-input-border-color: transparent;
    }
  }
}
.dialog-footer {
  margin-top: 22px;
}
</style>
